<nz-page-header nzTitle="应用列表">
    <nz-breadcrumb nz-page-header-breadcrumb>
        <nz-breadcrumb-item>
            <a [routerLink]="['/']">首页</a>
        </nz-breadcrumb-item>
        <nz-breadcrumb-item>
            <a [routerLink]="['/app-management']">应用管理</a>
        </nz-breadcrumb-item>
    </nz-breadcrumb>
</nz-page-header>

<nz-card [nzExtra]="extraAction">
    <ng-template #extraAction>
        <button nz-button nzSize="large" class="mr-4" (click)="create()" nzType="primary">{{'add' | translate}}</button>
        <button nz-button nzSize="large" (click)="refresh()">{{'refresh' | translate}}</button>
    </ng-template>
    <nz-table #dataTable [nzData]=" apps$ | async" [nzLoading]="pageingInfo.isTableLoading">
        <thead>
            <tr>
                <th width="140px">操作</th>
                <!-- <th width="280px">id</th> -->
                <th>name</th>
                <th>clientName</th>
                <th>providerName</th>
                <th>providerKey</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let item of dataTable.data">
                <td>
                    <button nz-button nzType="primary" nzSize="small" (click)="edit(item)">{{'edit' |
                        translate}}</button>
                    <nz-divider nzType="vertical"></nz-divider>
                    <button nz-button nzType="danger" nzSize="small" nz-popconfirm [nzPopconfirmTitle]="'确定删除吗?'" (nzOnConfirm)="delete(item)"
                        nzPopconfirmPlacement="top">{{'delete' | translate}}</button>
                </td>
                <!-- <td>{{item.id}}</td> -->
                <td>{{item.name}} <nz-tag> {{item.name | translate}} </nz-tag>
                </td>
                <td>{{item.clientName}}</td>
                <td>{{item.providerName}}</td>
                <td>{{item.providerKey}}</td>
                <td style="padding:0;">
                    <table class="table">
                        <tr class="text-primary">
                            <th>Key</th>
                            <th>Value</th>
                        </tr>
                        <tr *ngFor="let key of item.value | keyvalue">
                            <td style="width:150px;">{{key.key}}</td>
                            <td> ********** </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </tbody>
    </nz-table>
</nz-card>